<template>
  <!--  <div>-->
  <el-container>
    <el-main>
      <el-row gutter="5">
          <el-card :class="box-card"  style="height:600px;overflow-y: scroll;margin-top: -20px">
            <div class="card-header" style="color: rgb(6,203,255);height:15px">
              <img :src="bgnanimg" style="position: relative ;z-index:1;left:40px;top: -40px">
              <span style="position: relative ;z-index:2;left: -215px;top: -53px">开始分析</span>
            </div>
            <el-table
              v-for="(item,index) in tableData"
              :key="item"
              :data="item[index]"
              :header-cell-style="headerStyle"
              :cell-style="{'text-align':'center',padding: '0px'}"
              style="width: 100%;margin-bottom: 25px"
              :row-class-name="tableRowClassName"
              :span-method="objectSpanMethod"
            >
              <el-table-column
                label="告警逻辑"
                prop="describe"
                align="center"
                width="120px"
                show-overflow-tooltip
              />
              <el-table-column
                label="告警逻辑"
                prop="ite"
                align="center"
                width="170px"
                show-overflow-tooltip
              />

              <el-table-column
                prop="1"
                label="故障上限"
                width="auto"
                show-overflow-tooltip
              />
              <el-table-column
                prop="data"
                label="告警上限"
                width="auto"
                show-overflow-tooltip
              />
              <el-table-column
                prop="4"
                label="告警下限"
                width="auto"
                show-overflow-tooltip
              />
              <el-table-column
                prop="5"
                label="故障下限"
                width="auto"
                show-overflow-tooltip
              />
              <el-table-column prop="name" label="实时数据" width="auto">
              </el-table-column>
              <el-table-column
                prop="status"
                label="当前状态"
                width="auto"
                show-overflow-tooltip
              >
                <!--            固定用法，scope=“scope”，这样可以取到table的row值-->
                <template scope="scope">
                  <span v-if="scope.row.status=='正常'" style="color: rgb(32,255,2)">正常</span>
                  <span v-else-if="scope.row.status=='告警'" style="color:rgb(255,181,2)">告警</span>
                  <span v-else-if="scope.row.status=='故障'" style="color: rgb(255,20,2)">故障</span>
                  <span v-else-if="scope.row.status=='预警'" style="color: rgb(255,255,255)">预警</span>
                </template>
              </el-table-column>>

            </el-table>
          </el-card>

          <div style="background-image: url('../../assets/img/fxjlbg.png');background-repeat: repeat">
            <el-card :class="box" style="height:140px">
              <div class="card-header" style="color: rgb(6,203,255);height:15px">
                <img :src="bgnanimg" style="position: relative ;z-index:1 ;left:40px;top: -40px">
                <span style="position: relative;z-index:2;left: -215px;top: -52px">分析结论</span>
              </div>

              <div style="color:#E4ECECFF;text-align: left;background-image: url('../../assets/img/fxjlbg.png') ;background-repeat: repeat">
                <span>1.当前半导体制冷器温度为<br></span>
                <span>2.当前调制器驱动电压为<br></span>
                <span>3.今日LED最大突变量为</span>
              </div>
            </el-card>
          </div>
      </el-row>
    </el-main>
  </el-container>

  <!--  </div>-->
</template>

<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        field101: [1, 2]
      },

      bgnanimg: require('@/assets/img/bgana.png'),

      tableData:[
        {
          0: [
            {
            describe: '实施越线判别',
            ite: 'Led电流',
            data: '2016-05',
            name: '王小虎',
            status: '正常'
          }, {
            describe: '实施越线判别',
            ite: '输入电压平均偏离差',
            data: '2016-05',
            name: '王小虎',
            status: '告警'
          }, {
            describe: '实施越线判别',
            ite: '半导体制冷器温度',
            data: '2016-05',
            name: '王小虎',
            status: '故障'
          }, {
            describe: '实施越线判别',
            ite: '半导体制冷器温度',
            data: '2016-05',
            name: '王小虎',
            status: '预警'
          }]
        },
        {
          1: [{
            describe: '数据突变判别',
            ite: 'Led电流',
            data: '2016-05',
            name: '王小虎',
            status: '正常'
          }, {
            describe: '数据突变判别',
            ite: '半导体制冷器温度',
            data: '2016-05',
            name: '王小虎',
            status: '正常'
          }, {
            describe: '数据突变判别',
            ite: '半导体制冷器温度',
            data: '2016-05',
            name: '王小虎',
            status: '故障'
          }, {
            describe: '数据突变判别',
            ite: '半导体制冷器温度',
            data: '2016-05',
            name: '王小虎',
            status: '故障'
          }]
        },
        {
          2:[{
            describe: '综合判别',
            ite: 'Led电流',
            data: '2016-05',
            name: '王小虎',
            status: '正常'
          }, {
            describe: '综合判别',
            ite: '半导体制冷器温度',
            data: '2016-05',
            name: '王小虎',
            status: '正常'
          }, {
            describe: '综合判别',
            ite: '半导体制冷器温度',
            data: '2016-05',
            name: '王小虎',
            status: '正常'
          }, {
            describe: '综合判别',
            ite: '半导体制冷器温度',
            data: '2016-05',
            name: '王小虎',
            status: '正常'
          }]},
        {3:[
            {
              describe: '综合判别',
              ite: 'Led电流',
              data: '2016-05',
              name: '王小虎',
              status: '故障'
            }, {
              describe: '综合判别',
              ite: '半导体制冷器温度',
              data: '2016-05',
              name: '王小虎',
              status: '正常'
            }, {
              describe: '综合判别',
              ite: '半导体制冷器温度',
              data: '2016-05',
              name: '王小虎',
              status: '预警'
            }, {
              describe: '综合判别',
              ite: '半导体制冷器温度',
              data: '2016-05',
              name: '王小虎',
              status: '正常'
            }]},
        {4:[
            {
              describe: '再次判别',
              ite: 'Led电流',
              data: '2016-05',
              name: '王小虎',
              status: '故障'
            }, {
              describe: '再次判别',
              ite: '半导体制冷器温度',
              data: '2016-05',
              name: '王小虎',
              status: '正常'
            }, {
              describe: '再次判别',
              ite: '半导体制冷器温度',
              data: '2016-05',
              name: '王小虎',
              status: '预警'
            }, {
              describe: '再次判别',
              ite: '半导体制冷器温度',
              data: '2016-05',
              name: '王小虎',
              status: '正常'
            }]
        },
        {5:[
            {
              describe: '四次判别',
              ite: 'Led电流',
              data: '2016-05',
              name: '王小虎',
              status: '故障'
            }, {
              describe: '再次判别',
              ite: '半导体制冷器温度',
              data: '2016-05',
              name: '王小虎',
              status: '正常'
            }, {
              describe: '再次判别',
              ite: '半导体制冷器温度',
              data: '2016-05',
              name: '王小虎',
              status: '预警'
            }, {
              describe: '再次判别',
              ite: '半导体制冷器温度',
              data: '2016-05',
              name: '王小虎',
              status: '正常'
            }]
        },

      ],
      rules: {
        field101: [{
          required: true,
          type: 'array',
          message: '请至少选择一个field101',
          trigger: 'change'
        }]
      },
      field101Options: [],
      field101Props: {
        'multiple': false
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return 'warning-row'
      } else {
        return 'transparent-row'
      }
    },

    // 获取合并配置明细
    // getSpanArr() {
    //   // data就是我们从后台拿到的数据
    //   this.spanArr = [];
    //   this.pos = 0;
    //   this.long =1;
    //   this.spanArrdfytsl = [];//合并单元格统计数量
    //   this.posdfytsl = 0;//合并单元格统计数量索引
    //   for(const fitem in this.tableData){
    //       // 判断当前元素与上一个元素是否相同
    //     this.long = fitem[0].length;
    //    }
    //   return this.long;
    // },

    // 合并单元格
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // const count=this.tableData[0].length;
      const count = 4
      // 合并第一列单元格
      if (columnIndex === 0) {
        // if (this.spanArr[rowIndex] > 1) return { rowspan: this.spanArr[rowIndex], colspan: 1 };
        if (rowIndex % count === 0) {
          return { rowspan: count, colspan: 1 }
        }
        return { rowspan: 0, colspan: 0 }
      }
    },

    headerStyle({ row, column, rowIndex, columnIndex }) {
      const styleObject = {
        'text-align': 'center',
        'font-weight': 'bolder',
        'background-color': 'rgb(7,45,69)',
        'border-bottom': '0px rgb(103, 194, 58) solid',
        'display':''
      }
      if (rowIndex === 0) { // 行索引为0代表表头那一行
        if (columnIndex === 0) { // 列索引，找到要合并的那一列
          this.$nextTick(() => {
            if (document.getElementsByClassName(column.id).length !== 0) {
              document.getElementsByClassName(column.id)[0].setAttribute('colSpan', 2)
            }
          })
        }
      }
      if (rowIndex === 0 && columnIndex === 1) { // 将相邻被合并的列设为隐藏
        styleObject.display = 'none'
        return styleObject
      }
      return styleObject
    },

    // cellStyle({ row, rowIndex }) {
    //   if (rowIndex % 2 === 0) {
    //     return 'background:rgb(5,33,56)'
    //   } else {
    //     return 'background:rgb(7,45,69)'
    //   }
    // },

    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    getField101Options() {
      // TODO 发起请求获取数据
      this.field101Options
    }
  }
}

</script>
<style>
/* 表格部分样式*/
.el-table__header tr,
.el-table__header th {
  padding: 0;
  height: 10px;
  font-size: 14px;
}
.el-table__header {
  border-spacing: 0px;
}
/*表格斑马自定义颜色*/
.el-table .warning-row {
  background: #072D45 !important;
}
.el-table .transparent-row {
  background: #052138 !important;
}

.el-table th.gutter{
  display: table-cell!important;
}
.el-table–scrollable-y colgroup col[name=‘gutter’]{width:0px}
/* 去掉最下面的那一条线*/
.el-table::before {
  height: 0px;
  background-color: transparent;
}
/* 设置表格行高度*/
.el-table__body tr,
.el-table__body td {
  padding: 0;
  height: 200px;

}

/*表格内背景颜色*/
.el-table th,
.el-table tr,
.el-table td {

  /*background-color: #052138;*/
  /*/ / 背景透明 */
  border: 0px;
  color: #93dcfe;
  /*/ / 修改字体颜色 */
  font-size: 14px;
  height: 28px;
  font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;
  font-weight: Normal;
}
</style>
<style scoped>
/*color: #052138;*/
.el-main {
  background-color: #052138;
  text-align: center;
  height: 760px;
  padding-right: 30px;
  /*line-height: 20px;*/
}


html,body,#app,.el-container{
  padding: 0px;
  margin: 0px;
  height: 100%;
}
/*.el-container:nth-child(5) .el-aside,*/
/*.el-container:nth-child(6) .el-aside {*/
/*  line-height: 260px;*/
/*}*/

/*.el-container:nth-child(7) .el-aside {*/
/*  line-height: 320px;*/
/*}*/
.el-card{
  background-color:#052138 ;
  padding-left: 20px;
  padding-top: 20px;
  padding-right: 0px;
  border: none;
  width: 100%;
}

/*修改表头样式-加边框*/
::v-deep .el-table__header-wrapper {
  border: solid 1px #052138;
}
::v-deep .el-table__body-wrapper {
  border: solid 1px #052138;
}

/*!/ 滚动条样式*!*/
/*定义滚动条轨道 内阴影+圆角*/
/*::-webkit-scrollbar-track {*/
/*  box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);*/
/*  border-radius: 10px;*/
/*  background-color: rgba(240, 240, 240, .5);*/
/*}*/

::-webkit-scrollbar {
  width: 10px;
  background-color: #000000;
}
::-webkit-scrollbar-thumb {
  border-radius: 15px;
  height: 10px;
  background-color: #072D45;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
/*.card-header{*/
/*  justify-content: space-between;*/
/*  align-items: center;*/
/*}*/

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

</style>

